<template>
	<div>
		<div>
			<Row style="text-align: left;margin-top: 41px;">
				<Col span="12" style="text-align: left;">
				<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
				<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">管理列表</span>
				</Col>
				<Button style="float: right;background-color: orange;color: white;margin-right: 45px;" @click="addsubject">+&nbsp;新增分层</Button>
			</Row>
		</div>
		<div style="min-height: 300px; padding-bottom:20px ;">
			<Row style="margin:0 auto;margin:20px 45px 5px 45px;color: #666666;border-radius: 10px; background-color: #f0f8ff;padding: 10px 0;">
				<Col span="3" style="text-align: center;width: 20%;">
				<span style="font-size: 16px;">序号</span>
				</Col>
				<Col span="4" style="text-align: center;width: 20%;">
				<span style="font-size: 16px;">层次名称</span>
				</Col>
				<Col span="3" style="text-align: center;width: 20%;">
				<span style="font-size: 16px;">高考选科</span>
				</Col>
				<Col span="3" style="text-align: center;width: 20%;">
				<span style="font-size: 16px;">排序</span>
				</Col>
				<Col span="3" style="text-align: center;width: 20%;">
				<span style="font-size: 16px;">操作</span>
				</Col>
			</Row>
			<Row v-for="(item,index) in manageList" :key="item.itemId" style="margin:0 auto;margin:20px 45px 5px 45px;">
				<Col span="3" style="text-align: center;width: 20%;">
				<span style="font-size: 16px;">{{item.itemId}}&nbsp;</span>
				</Col>
				<Col span="4" style="text-align: center;width: 20%;">
				<span style="font-size: 16px;">{{item.levelname}}&nbsp;</span>
				</Col>
				<Col span="3" style="text-align: center;width: 20%;">
				<span style="font-size: 16px;">{{item.subjechoose1}}、{{item.subjechoose2}}、{{item.subjechoose3}}&nbsp;</span>
				</Col>
				<Col span="3" style="text-align: center;width: 20%;">
				<span style="font-size: 16px;">{{item.sort}}&nbsp;</span>
				</Col>
				<Col span="4" style="text-align: center;width: 20%;">
				<Col span="4" style="text-align: center;width: 50%;">
				<a style="font-size: 16px;" @click="xkpkedit(index)">编辑&nbsp;</a>
				</Col>
				<Col span="4" style="text-align: center;width: 50%;">
				<a style="font-size: 16px;" @click="xkpkdel(index)">删除&nbsp;</a>
				</Col>
				</Col>
			</Row>

			<div v-if="sortSettingHidden" span="10" style=" width: 600px; z-index: 1000;background-color: white;margin:0 auto;position: absolute;top: 200px;left: 0;right: 0;text-align: left;height:500px;border: 1px solid #e9eaec;padding: 50px;border-radius: 15px;">
				<Row style="width: 100%;text-align: center;margin-bottom: 20px;">
					<span style="margin-bottom: 20px;font-size: 21px;">{{title}}</span>
				</Row>
				<Row style="font-size: 15px;">
					<Col style="text-align: center;padding: 10px;">
					<span>分层名称:</span>
					<Select v-model="level" @on-change="levelChange" style="text-align: center; width: 65%;position: relative;">
						<Option v-for="item in levelList" :value="item.label" :key="item.label">{{item.label}}</Option>
					</Select>
					</Col>
					<Row>
						<Col style="text-align: center;padding: 10px;width: 100%;">
						<span>高考选科:</span>
						<Select v-model="subject1" @on-change="subjectChange1" style="text-align: center; width: 100px;position: relative;">
							<Option v-for="(item,index) in subjectList1" :value="item.label" :key="item.label">{{item.label}}</Option>
						</Select>

						<Select v-model="subject2" @on-change="subjectChange2" style="text-align: center; width: 100px;position: relative;">
							<Option v-for="item in subjectList2" :value="item.label" :key="item.label">{{item.label}}</Option>
						</Select>

						<Select v-model="subject3" @on-change="subjectChange3" style="text-align: center; width: 100px;position: relative;">
							<Option v-for="item in subjectList3" :value="item.label" :key="item.label">{{item.label}}</Option>
						</Select>
						</Col>
						<Col style="text-align: center;padding: 10px;">
						<span>排&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;序:</span>
						<input type="text" oninput="value=value.replace(/[^\d]/g,'')" maxlength="10" v-model="addsort" value="addsort" style="text-align: center;width: 65%;position: relative;height: 30px;line-height: 30px;ime-mode: inactive;"></input>
						</Col>
					</Row>
				</Row>
				<Row style="text-align: center;">
					<Col span="24" style="margin-top:15px">
					<Button type="ghost" @click="cancel" icon="close-round" style="margin-right: 20px;">取消</Button>
					<Button v-if="this.title=='新增分层'?true:false" type="primary" @click="savesort" icon="checkmark-round">保存</Button>
					<Button v-if="this.title=='编辑分层'?true:false" type="primary" @click="editsavesort" icon="checkmark-round">保存</Button>
					</Col>
				</Row>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				listitemId: "",
				title: "",
				obj: "",
				manageList: [{
						itemId: "01",
						levelname: "A层",
						subjechoose1: "物理",
						subjechoose2: "化学",
						subjechoose3: "地理",
						sort: "1",
					},
					{
						itemId: "02",
						levelname: "B层",
						subjechoose1: "政治",
						subjechoose2: "化学",
						subjechoose3: "地理",
						sort: "1",
					},
					{
						itemId: "03",
						levelname: "C层",
						subjechoose1: "物理",
						subjechoose2: "历史",
						subjechoose3: "地理",
						sort: "1",
					},
					{
						itemId: "04",
						levelname: "A层",
						subjechoose1: "物理",
						subjechoose2: "化学",
						subjechoose3: "生物",
						sort: "1",
					},
					{
						itemId: "05",
						levelname: "B层",
						subjechoose1: "生物",
						subjechoose2: "化学",
						subjechoose3: "地理",
						sort: "1",
					},
					{
						itemId: "06",
						levelname: "A层",
						subjechoose1: "历史",
						subjechoose2: "化学",
						subjechoose3: "地理",
						sort: "1",
					},
					{
						itemId: "07",
						levelname: "C层",
						subjechoose1: "政治",
						subjechoose2: "化学",
						subjechoose3: "地理",
						sort: "2",
					},
				],
				addsort: "",
				subjectList1: [{
						value: 1,
						label: "物理",
					},
					{
						value: 2,
						label: "化学",
					},
					{
						value: 3,
						label: "生物",
					},
					{
						value: 4,
						label: "政治",
					},
					{
						value: 5,
						label: "历史",
					},
					{
						value: 6,
						label: "地理",
					},
				],
				subjectList2: [{
						value: 1,
						label: "化学",
					},
					{
						value: 2,
						label: "物理",
					},
					{
						value: 3,
						label: "生物",
					},
					{
						value: 4,
						label: "政治",
					},
					{
						value: 5,
						label: "历史",
					},
					{
						value: 6,
						label: "地理",
					},
				],
				subjectList3: [{
						value: 1,
						label: "生物",
					},
					{
						value: 2,
						label: "化学",
					},
					{
						value: 3,
						label: "物理",
					},
					{
						value: 4,
						label: "政治",
					},
					{
						value: 5,
						label: "历史",
					},
					{
						value: 6,
						label: "地理",
					},
				],

				subject1: "物理",
				subject2: "化学",
				subject3: "生物",
				level: "A层",
				sortSettingHidden: false,
				sortSettingHidden1: false,
				levelList: [{
						value: 1,
						label: "A层",
					},
					{
						value: 2,
						label: "B层",
					},
					{
						value: 3,
						label: "C层",
					},
					{
						value: 4,
						label: "D层",
					},
				],

			}
		},
		created(){
			
		},
		methods: {
			xkpkedit: function(index) {
				this.title = "编辑分层"
				this.sortSettingHidden = true
				this.obj = index
				this.listitemId = this.manageList[index].itemId
				this.level = this.manageList[index].levelname
				this.subject1 = this.manageList[index].subjechoose1
				this.subject2 = this.manageList[index].subjechoose2
				this.subject3 = this.manageList[index].subjechoose3
				this.addsort = this.manageList[index].sort
			},
//			cancel1: function() {
//				this.sortSettingHidden1 = false
//			},
//			savesort1: function() {
//				if(this.addsort == "") {
//					alert('排序不能为空')
//				} else {
//					this.manageList = this.manageList1
//					this.sortSettingHidden1 = false
//					alert('保存成功')
//				}
//			},
			xkpkdel: function(index) {
				this.manageList.splice(index, 1)

			},
			addsubject: function() {
				this.title = "新增分层"
				this.sortSettingHidden = true
				this.level = "A层"
				this.subject1 = "物理"
				this.subject2 = "化学"
				this.subject3 = "生物"
				this.addsort = ""
			},
			levelChange: function() {},
			subjectChange1: function() {},
			subjectChange2: function() {},
			subjectChange3: function() {},
			cancel: function() {
				this.sortSettingHidden = false
			},
			savesort: function() {
				if(this.addsort == "") {
					alert('排序不能为空')
				} else if(this.subject1==this.subject2){
					alert('不能重复选择相同科目')
				}else if(this.subject2==this.subject3){
					alert('不能重复选择相同科目')
				}else if(this.subject3==this.subject1){
					alert('不能重复选择相同科目')
				}else
				{
					this.manageList.push({
						itemId: '0' + (this.manageList.length + 1),
						levelname: this.level,
						subjechoose1: this.subject1,
						subjechoose2: this.subject2,
						subjechoose3: this.subject3,
						sort: this.addsort,
					})
					this.sortSettingHidden = false
					alert('保存成功')
				}
			},
			editsavesort: function() {
				if(this.addsort == "") {
					alert('排序不能为空')
				} else if(this.subject1==this.subject2){
					alert('不能重复选择相同科目')
				}else if(this.subject2==this.subject3){
					alert('不能重复选择相同科目')
				}else if(this.subject3==this.subject1){
					alert('不能重复选择相同科目')
				}else {
					this.manageList.splice(this.obj, 1, {
						itemId: this.listitemId,
						levelname: this.level,
						subjechoose1: this.subject1,
						subjechoose2: this.subject2,
						subjechoose3: this.subject3,
						sort: this.addsort,
					})
					this.sortSettingHidden = false
					alert('保存成功')
				}
			},
		},
		
		
	}
</script>

<style>

</style>